<!--  -->
<template>
  <div>
    <a-modal
      :title="targetManagement.target"
      :width="640"
      :visible="visible"
      :confirmLoading="loading"
      :footer="getFooter()"
      @ok="
        () => {
          $emit('ok')
        }
      "
      @cancel="
        () => {
          $emit('cancel')
        }
      "
    >
      <a-spin :spinning="loading">
        <div class="tips" style="white-space: pre-wrap;">
          <div style="white-space:nowrap">评分依据：</div>
          <div style="white-space: pre-wrap;">{{ targetManagement.comment || "暂无" }}</div>
        </div>
        <div class="datum">备查资料：{{ targetManagement.backUpData || '暂无' }}</div>
        <div style="margin-top: 25px; display: flex">
          <span>参考文件</span>
          <div>
            <div v-for="(file, index) in targetManagement.files" :key="index">
              <img class="word" src="@/assets/word.png" alt="" v-if="file.type === 'doc' || file.type === 'docx'" />
              <img class="pdf" src="@/assets/pdf.png" alt="" v-else />
              <span class="required" @click="handlePreview(file)">{{ file.original || '' }}</span>
            </div>
          </div>
          <!-- <img class="pic" src="@/assets/tp.png" alt="">
          <img class="pdf" src="@/assets/pdf.png" alt=""> -->
        </div>
        <div style="margin-top: 12px">
          <input
            ref="uploadFile"
            type="file"
            multiple
            style="display: none"
            class="file-input"
            @change="change"
            accept="image/*,.pdf,.doc,.docx"
          />
          <span>填报文件<img class="file" src="@/assets/tips.png" alt="" /></span>
          <a-button type="primary" @click="handleUpload" :disabled="status !== 2 ? true : false">点击上传</a-button>
          <span @click="handleSelect" class="select_file">选择文件</span>
          <div class="remark">注：选择已上传的文件，避免重复操作，只能上传pdf，word，图片文件，且不超过10M</div>
          <div style="margin-left: 85px">
            <div>
              <div
                style="
                  display: flex;
                  align-items: center;
                  cursor: pointer;
                  margin-top: 5px;
                  margin-bottom: 5px;
                "
                v-for="(item, index) in files"
                :key="index"
                @click="handlePreview(item)"
              >
                <div
                  style="
                    margin-right: 10px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    width: 200px;
                  "
                >
                  {{ item.original }}
                </div>
                <a-icon type="close" @click.stop="deleteFile(index)" />
              </div>
            </div>
          </div>
        </div>
        <div class="file_list" v-show="fileList.length">
          <span>合并后文件</span>
          <div class="file_container" v-for="(item, index) in fileList" :key="index">
            <img class="word" src="@/assets/word.png" alt="" v-if="item.type==='docx'||item.type==='doc'" />
            <span class="required" @click="handleLook(item)">{{ item.original }}</span>
            <img class="delete" src="@/assets/delete.png" alt="" @click="handleDelete(item, index)" />
          </div>
        </div>
        <div class="form_item">
          <span>自评得分</span>
          <a-input-number
            :min="0"
            :max="Number(targetManagement.totalPoint)"
            style="width:353px;margin-left:16px;height:36pxmargin-right:16px;"
            :disabled="status !== 2 ? true : false"
            v-model="queryParam.selfScore"
            placeholder=" " />
          <span>总分：{{ targetManagement.totalPoint }}</span>
        </div>
        <div class="form_item second">
          <span>备注说明</span>
          <a-input v-model="queryParam.comment" placeholder=" " :disabled="status !== 2 ? true : false" type="textarea" />
        </div>
        <div>
          <div class="instruction">
            <div class="title">指导意见</div>
            <div class="collapse" v-if="replyList.length">
              <!-- <span>{{ targetManagement.target }}</span> -->
              <div @click="handleExpend">
                <span style="color: #4477f8">{{ expend ? '展开' : '收起' }}</span>
                <a-icon type="down" style="color: #4477f8" v-if="expend" />
                <a-icon type="up" style="color: #4477f8" v-else />
              </div>
            </div>
          </div>
          <div v-if="showInstruction">
            <div class="time_line">
              <div class="tine_line_item" v-for="(item, index) in replyList" :key="index">
                <div class="tine_line_item_left">
                  <div></div>
                  <div class="line"></div>
                </div>
                <div class="tine_line_item_right">
                  <div :style="{color:item.type === null ? '#4D70F8':'#FEA538'}">
                    {{ item.type===null?'社会组织':'指导专家' }} {{ item.createTime }}
                  </div>
                  <div>{{ item.content }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-spin>
    </a-modal>
    <a-modal
      title="选择文件"
      :width="640"
      :visible="fileVisible"
      :confirmLoading="fileLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-spin :spinning="fileLoading">
        <a-form :form="form" v-bind="formLayout" ref="form">
          <a-form-item label="文件">
            <a-select
              mode="multiple"
              showArrow
              placeholder="请选择文件"
              option-label-prop="label"
              :filterOption="filterOption"
              v-decorator="['leader', { rules: [{ required: true, message: '请选择文件' }] }]"
            >
              <a-select-option
                v-for="(file1, index) in fileListBefore"
                :key="index"
                :value="file1.id"
                :label="file1.original"
              >{{ file1.original }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-form>
      </a-spin>
    </a-modal>
    <a-modal
      title="word预览"
      :width="1000"
      :visible="previewVisible"
      @ok="previewVisible = false"
      @cancel="previewVisible = false"
    >
      <div class="docx_container">
        <div class="home">
          <div ref="file"></div>
        </div>
        <div v-if="previewLoading" class="spinBox">
          <a-spin></a-spin>
        </div>
      </div>
    </a-modal>
    <a-modal
      title="pdf预览"
      :width="1000"
      :visible="pdfPreviewVisible"
      :footer="null"
      @cancel="
        () => {
          pdfPreviewVisible = false
        }
      "
    >
      <div class="docx_container">
        <pdf v-for="i in numPages" :key="i" :page="i" :src="pdfUrl" ref="pdf"></pdf>
        <div v-if="previewLoading" class="spinBox">
          <a-spin></a-spin>
        </div>
      </div>
    </a-modal>
    <a-modal
      title="图片预览"
      :width="640"
      :visible="picPreviewVisible"
      :footer="null"
      @cancel="
        () => {
          picPreviewVisible = false;
        }
      "
    >
      <img :src="picUrl" style="width: 100%;height:auto"></img>
    </a-modal>
  </div>
</template>

<script>
import axios from 'axios'
import pdf from 'vue-pdf'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import storage from 'store'
const docx = require('docx-preview')
export default {
  props: {
    visible: {
      type: Boolean,
      required: false
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    status: {
      type: [String, Number],
      default: ''
    }
  },
  components: { pdf },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    return {
      previewLoading: false,
      form: this.$form.createForm(this),
      expend: true, // true 展开 false 收起
      showInstruction: false, // 指导意见
      fileVisible: false, // 选择文件
      queryParam: {
        selfScore: '', // 自评得分
        comment: '' // 备注说明
      },
      fileList: [
      ], // 上传文件列表
      replyList: [], // 回复列表
      fileLoading: false,
      previewVisible: false, // 预览word pic
      targetManagement: {
      }, // 说明 备查资料 参考资料
      pdfUrl: '',
      pdfPreviewVisible: false,
      files: [], // 提交文件列表
      fileListBefore: [], // 历史记录文件
      picPreviewVisible: false,
      picUrl: '',
      numPages: null
    }
  },
  methods: {
    // 判断底部按钮
    getFooter () {
      if (this.status !== 2) {
        return null
      } else {
        return undefined
      }
    },
    // 选择文件
    handleSelect () {
      if (this.status !== 2) return this.$message.info('该体系不在填报中！')
      this.fileVisible = true
    },
    // 删除文件
    handleDelete (item, index) {
      this.fileList.splice(index, 1)
      // this.files = []
    },
    // 展开收起
    handleExpend () {
      this.expend = !this.expend
      this.showInstruction = !this.showInstruction
    },
    handleCancel () {
      this.fileVisible = false
      this.$refs.form.form.resetFields()
    },
    // 选择文件
    change (e) {
      // console.log(e);
      this.$emit('update:loading', true)
      const param = new FormData()
      for (let i = 0; i < e.target.files.length; i++) {
        if (e.target.files[i].size / 1024 / 1024 > 10) {
          this.$message.error(`${e.target.files[i].name}大于10M,请检查`)
          this.$emit('update:loading', false)
          return
        } else {
          param.append('files', e.target.files[i]) // 这里append中的file，是给文件，起的名字，后端通过该名字获取指定文件
        }
      }
      axios
        .post(
          'https://pinggu.mkcom.cn/grade-evaluation-api/minio/uploadFiles',
          //'http://124.70.184.139/grade-evaluation-api/minio/uploadFiles',
          //'http://localhost:8091/minio/uploadFiles',
          param,
          {
            headers: {
              'Authorization': storage.get(ACCESS_TOKEN),
              'Content-type': 'multipart/form-data'
            },
            'Content-type': 'multipart/form-data'
          }
        )
        .then((res) => {
          // console.log(res)
          this.files.push(...res.data.data)
          this.$emit('update:loading', false)
        })
    },
    // 上传文件
    handleUpload () {
      // console.log(this.$refs.uploadFile)
      this.$refs.uploadFile.click()
      this.$refs.uploadFile.value = ''
    },
    // 选择文件
    handleOk () {
      this.$refs.form.form.validateFields((errors, values) => {
        if (!errors) {
          this.fileLoading = true
          // console.log('values', values)
          values.leader.forEach((item) => {
            this.fileListBefore.forEach((file) => {
              if (file.id === item) {
                this.files.push(file)
              }
            })
            this.fileLoading = false
            this.fileVisible = false
          })
        } else {
          this.fileLoading = false
        }
      })
    },
    filterOption (input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    handlePreview (file) {
      this.previewLoading = true
      if (file.type === 'doc' || file.type === 'docx') {
        this.previewVisible = true
        axios({
          method: 'get',
          responseType: 'blob', // 设置响应文件格式
          url: file.url
        }).then(({ data }) => {
          docx.renderAsync(data, this.$refs.file) // 渲染到页面预览
        }).finally(() => {
          // this.previewLoading = false
        })
      } else if (file.type === 'pdf') {
        this.pdfUrl = pdf.createLoadingTask({
          url: file.url,
          withCredentials: false
        })
        this.pdfUrl.promise
          .then((pdf) => {
            this.numPages = pdf.numPages
            console.log(this.numPages)
          })
          .catch((err) => {
            console.error('pdf 加载失败', err)
          }).finally(() => {
            this.previewLoading = false
          })
        this.pdfPreviewVisible = true
      } else {
        this.picUrl = file.url
        this.picPreviewVisible = true
      }
      // window.open(file.url, '_blank')
    },
    // 查看word
    handleLook (data) {
      this.previewVisible = true
      this.previewLoading = true
      axios({
        method: 'get',
        responseType: 'blob', // 设置响应文件格式
        url: data.url
      }).then(({ data }) => {
        docx.renderAsync(data, this.$refs.file) // 渲染到页面预览
      }).finally(() => {
        this.previewLoading = false
      })
      // console.log('word预览')
      // axios
      //   .get(data.url, {
      //     responseType: 'blob' // 注意返回数据类型
      //   })
      //   .then((res) => {
      //     // 对后端返回二进制流做处理
      //     const file = new File([res.data], data.original, {
      //       type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
      //     })
      //     // 加载完成后
      //     if (this.$refs.file) {
      //       this.$refs.file.innerHTML = ''
      //     }
      //     console.log('word预览')
      //     window.docx2html(file, { container: this.$refs.file }).then(() => {
      //       // this.spinning = false
      //     })
      //     // const blob = new Blob([res.data])
      //     // renderAsync(blob, this.$refs.word, null, this.docxOptions).then(this.spinning = false)
      //   }).finally(() => {
      //     // this.docSpinning = false
      //   })
    },
    deleteFile (index) {
      this.files.splice(index, 1)
    }
  }
}
</script>
<style lang="scss" scoped>
.tips {
  display: flex;
}
.tips,
.datum {
  // height: 60px;
  // line-height: 60px;
  background: #edf3ff;
  border-radius: 12px;
  padding:24px 0 24px 21px;
}
.datum {
  background: #fff9eb;
  margin-top: 11px;
}
img {
  width: 25px;
  height: 25px;
}
.word {
  margin-left: 28px;
}
.required {
  margin-left: 4px;
  cursor: pointer;
}
.pic {
  margin-left: 50px;
}
.pdf {
  margin-left: 28px;
}
.file {
  width: 14px;
  height: 14px;
  margin-left: 5px;
  margin-right: 12px;
}
.select_file {
  margin-left: 19px;
  color: #4d70f8;
  cursor: pointer;
}
.remark {
  color: #999;
  margin-top: 12px;
  margin-left: 85px;
  font-family: PingFang SC;
  font-weight: 500;
  // width: 300px;
}
.file_list {
  display: flex;
  align-items: center;
  // margin-top: 23px;
  // margin-left: 85px;
  .file_container:nth-child(n + 2) {
    margin-top: 5px;
  }
  .file_container {
    // width: 175px;
    display: flex;
    align-items: center;
    margin-left: 9px;
    .word {
      margin-left: 0;
      // margin-right: 9px;
    }
    .required {
      margin-left: 0;
      cursor: pointer;
    }
    .delete {
      width: 14px;
      height: 14px;
      margin-left: 22px;
      cursor: pointer;
    }
  }
}
.form_item {
  display: flex;
  align-items: center;
  margin-top: 20px;
  ::v-deep .ant-input {
    margin-left: 16px;
    height: 36px;
    width: 353px;
  }
}
.second {
  padding-bottom: 38px;
  border-bottom: 1px solid #f0f0f0;
  ::v-deep .ant-input {
    margin-left: 16px;
    height: 111px;
    width: 353px;
  }
}
.instruction {
  margin-top: 19px;
  .title {
    font-size: 16px;
  }
  .collapse {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 26px;
    color: #666;
    div {
      cursor: pointer;
      img {
        margin-left: 12px;
      }
    }
  }
}
.time_line {
  margin: 13px 0 21px 35px;
  .tine_line_item {
    display: flex;
    padding-bottom: 20px;
    .tine_line_item_left {
      div:first-child {
        width: 12px;
        height: 12px;
        border: 2px solid #5984fb;
        border-radius: 50%;
      }
      .line {
        width: 1px;
        background: #5984fb;
        height: 100%;
        margin-top: 2px;
        margin-left: 6px;
      }
    }
    .tine_line_item_right {
      margin-left: 22px;
      color: #999;
      line-height: 14px;
      div:nth-child(n + 2) {
        margin-top: 10px;
      }
      div:first-child {
        color: #4d70f8;
      }
      div:nth-child(3) {
        color: #fea538;
      }
    }
  }
}
.reply {
  display: flex;
  align-items: center;
  margin-left: 33px;
  ::v-deep .ant-input {
    width: 394px;
    border-radius: 19px;
    height: 38px;
  }
  ::v-deep .ant-btn {
    margin-left: 11px;
    border-radius: 19px;
  }
}
.home {
  width: 100%;
}
::v-deep .docx-wrapper {
  padding: none;
  background: none;
}
::v-deep .docx {
  width: auto !important;
  padding: 0px !important;
  box-shadow: none !important;
}
::v-deep label {
  color: rgba(0, 0, 0, 0.65);
}
.form {
  ::v-deep textarea {
    width: 353px;
    height: 111px;
    margin-left: 72px;
  }
}
::v-deep .ant-input-number-handler-wrap {
  display: none;
}
.docx_container {
  position: relative;
  .spinBox {
    display: flex;
    justify-content: center;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
</style>
